<template>
    <mt-tabbar class="tabbar nav-bar" v-model="selected" v-show="isshow">
        <mt-tab-item class="tab-item" v-for="(nav, index) in navs" :id="nav.id" @click.native="clickNav(nav)">
            <!--<div class="popup-wrapper">
                <div :class="'popup-'+index" v-show="nav.popupVisible" position="button">
                    <mt-cell v-for="child_nav in nav.childs">
                        <span slot="icon" class="iconfont" :class="'icon-'+child_nav.id"></span>
                        <router-link slot="title" :to="child_nav.url">{{child_nav.title}}</router-link>
                    </mt-cell>
                </div>
            </div>-->
            <mt-popup v-if="nav.childs&&nav.childs.length" :class="'popup-'+index" v-model="nav.popupVisible" position="bottom" popup-transition="popup-fade"
                :modal="false">
                <mt-cell v-for="child_nav in nav.childs">
                    <span slot="icon" class="iconfont" :class="'icon-'+child_nav.id"></span>
                    <router-link slot="title" :to="child_nav.url">{{child_nav.title}}</router-link>
                    <!--router-link-->
                </mt-cell>
            </mt-popup>
            <div>
                <span class="iconfont" :class="'icon-'+nav.id"></span> {{nav.title}}
            </div>
        </mt-tab-item>
    </mt-tabbar>
</template>
<script>
    import { router } from '../routes';
    export default {
        name: "nav-bar",
        data() {
            var res = {
                navs: [{
                    title: "奥索文章",
                    id: "article",
                    childs: [{
                        title: "奥索动态",
                        id: "news",
                        url: "/article-list/news",
                    }, {
                        title: "最新活动",
                        id: "events",
                        url: "/article-list/events",
                    }, {
                        title: "健康宣讲",
                        id: "speak",
                        url: "/article-list/speak",
                    }]
                }, {
                    title: "",
                    id: "home",
                    url: "/",
                }, {
                    title: "奥索名医",
                    id: "doctors",
                    url: "/doctors",
                }, {
                    title: "关于我们",
                    id: "about",
                    url: "/single-page/about",
                }],
                selected: "",
                isshow: true
            }
            res.navs.forEach(nav => {
                nav.popupVisible = false;
                nav.closedFromPopup = false;
            });
            this.onRouteChanged(res);

            return res;
        },
        methods: {
            clickNav(nav) {
                if (nav.url) {
                    router.push(nav.url);
                }
                // if (!nav.popupVisible) {
                console.log("nav.closedFromPopup:", nav.closedFromPopup);
                nav.popupVisible = !nav.popupVisible;
                // }
            },
            onRouteChanged(self) {
                window.router = router;
                const path = router.currentRoute.path;
                self || (self = this);
                if (path === "/" || path === "/index") {
                    self.isshow = false
                } else {
                    self.isshow = true
                }
            }
        },
        created() {
            router.afterEach((b, a, cb) => {
                this.onRouteChanged();
                cb();
            })
        }
    }
</script>
<style scoped>
    .tabbar{
        position: fixed;
        height: 55px;
        background-color: #333;
        color: #EEE;
    }
    .tabbar .is-selected{
        background-color:#666;
        color: #FFF;
    }
    .tab-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .popup-wrapper{
        width: 0;
        height: 0;
        top:0;
        left: 0;
        position: relative;
    }
    .popup-0{
        box-shadow: 0px 1px 4px rgba(51, 51, 51, 0.8);
        box-sizing: border-box;
        color:#333;
        width: 140px;
        border-radius: 8px;
        padding: 0 10px;
        left: 80px;/*width / 2 + 10*/
        bottom: 60px;
        /*transform: translate(-120%, 80%);*/
        /*left: 100px;*/
        /*top: 78%;
        left: 32%;*/
    }
    .popup-0 a{
        color:#333;
        text-decoration: none;
    }
    
    .popup-0::before {
        box-shadow: 2px 2px 3px rgba(51, 51, 51, 0.6);
        /*border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        
        border-top: 10px solid #fff;*/
        /*triangle: 10px top #fff;*/
        width: 13px;
        height: 13px;
        background-color: #FFF;
        transform: rotate(45deg);
        content: '';
        position: absolute;
        bottom: -5px;
        left: 45px;/*width / 4 + 10*/
        z-index: 1;
    }
</style>